1 00:00:00,600 --> 00:00:01,580 Hello and welcome. 2 00:00:01,590 --> 00:00:09,080 In this lecture we are going to create styling for an app using csx. 3 00:00:11,050 --> 00:00:16,650 To begin I have already added some basic styling here. 4 00:00:16,720 --> 00:00:18,240 Line one here. 5 00:00:18,600 --> 00:00:25,800 I've got the body select took sorta style you need select all then the property and the value. 6 00:00:25,900 --> 00:00:28,320 So the body is the Select is what. 7 00:00:28,340 --> 00:00:33,480 Um stylin and the proper TS have applied to the bodies of font family. 8 00:00:33,640 --> 00:00:38,560 So I've set a font for sans serif Wain's using fonts. 9 00:00:38,560 --> 00:00:46,860 It's always best to specify more than one font in case one is not available. 10 00:00:47,050 --> 00:00:53,170 E can default to the other but most computers should have Ariel a list. 11 00:00:53,380 --> 00:00:55,150 So that's what that is. 12 00:00:55,180 --> 00:01:03,910 Line 3 attached attacked property core padding Palin refers to the space inside the element. 13 00:01:03,950 --> 00:01:10,450 Giving a pad in of 30 pixels which will be applied round the four corners so there are four corners. 14 00:01:10,450 --> 00:01:18,950 Top right bottom left and then I've got the background give me in the background a hex value column 15 00:01:19,750 --> 00:01:26,680 and then I've got a class in line 7 notes a class chord wrapper which we created when we're doing an 16 00:01:26,710 --> 00:01:29,720 ah hastier male side of things. 17 00:01:32,320 --> 00:01:43,900 So the propertys give him the wrapper class selector give me set maximum width of 690 pixels so the 18 00:01:43,900 --> 00:01:49,390 actual container where the balloons will be will be 690 pixels. 19 00:01:49,560 --> 00:01:56,840 So to marjane to zero and then 0 2 0 or to a mains It will centre some parts of it. 20 00:01:57,100 --> 00:02:05,150 Okay and then one other class cord blue and set the carlaw to a hex value. 21 00:02:05,600 --> 00:02:18,730 Here online 12 on line 14 introduced a hate one selector which is the head in tag and I have given in 22 00:02:18,730 --> 00:02:21,860 the various properties I have set the mark. 23 00:02:21,920 --> 00:02:29,400 Given a property margin and sedita or took marjean refers to the space outside the element. 24 00:02:29,530 --> 00:02:35,650 So that means it will centre or the Four Corners on the page margin from the top mains. 25 00:02:35,770 --> 00:02:42,200 I want it to move down 50 pixels from the top margin from the bottom. 26 00:02:42,370 --> 00:02:45,130 Online 17 meters from the bottom. 27 00:02:45,130 --> 00:02:51,790 I wanted to move up 50 pixels collage refers to the colour of the text. 28 00:02:51,940 --> 00:02:58,170 Then on line 20 a text transformation property text transform. 29 00:02:58,300 --> 00:02:59,580 What that will do. 30 00:02:59,590 --> 00:03:02,470 This is the same same. 31 00:03:03,620 --> 00:03:12,170 Same properties fully hate one is tall make it upper case text transform is change it to upper case 32 00:03:12,610 --> 00:03:16,540 have said the font size to 30 pixels. 33 00:03:16,700 --> 00:03:17,750 Then the carlaw. 34 00:03:17,780 --> 00:03:20,820 I've given it a hex value column. 35 00:03:23,160 --> 00:03:25,080 Line 24. 36 00:03:25,080 --> 00:03:28,000 I have introduced a. 37 00:03:29,450 --> 00:03:30,750 Heidi. 38 00:03:31,250 --> 00:03:34,840 Okay I've got an idea here called Call balloon gallery. 39 00:03:34,940 --> 00:03:39,650 So this idea would have defined in our hasty mail document. 40 00:03:39,650 --> 00:03:44,710 So these are live propertys applied to the to the BALLAnd gallery. 41 00:03:44,750 --> 00:03:49,400 So this would be the gallery the actual deed that contains the balloons. 42 00:03:49,400 --> 00:03:55,800 So I've set the background to that hex value given the height of 121 pixels. 43 00:03:55,880 --> 00:04:03,530 Feel free to play around with these values set there with two hundred nineteen pixels text a line to 44 00:04:03,570 --> 00:04:11,180 sent me some what is text to be centred carlaw giving the colour property of hecks value font size refers 45 00:04:11,180 --> 00:04:14,080 to the size of a text font family. 46 00:04:14,210 --> 00:04:15,410 Sounds scary. 47 00:04:15,410 --> 00:04:19,280 Again I'll add another call aereo. 48 00:04:19,670 --> 00:04:26,770 So that there's a substitute font but it does refer to the space body radio. 49 00:04:26,780 --> 00:04:29,660 Here refers to the rounded corner. 50 00:04:29,680 --> 00:04:31,940 That's what gives it the rounded corner. 51 00:04:35,620 --> 00:04:44,140 Margin from the top 20 pixels display in line block display means I want the balance to be in line in 52 00:04:44,140 --> 00:04:44,890 the block. 53 00:04:45,070 --> 00:04:55,780 I want it to float to the left and offset the margin for the various pixel values I have added some 54 00:04:55,780 --> 00:04:59,090 styling for the individual. 55 00:04:59,110 --> 00:05:11,310 But loon's saw started from Lime 39 all the way to lying 74 so I'll just run through. 56 00:05:11,350 --> 00:05:12,970 Have you used. 57 00:05:14,510 --> 00:05:16,610 Online 39 vet. 58 00:05:16,770 --> 00:05:23,010 Have you used the M child select top. 59 00:05:23,210 --> 00:05:23,720 This is. 60 00:05:23,740 --> 00:05:28,040 Here's Cody n dash child Selecter. 61 00:05:28,280 --> 00:05:29,620 Okay so what that does. 62 00:05:29,630 --> 00:05:39,640 It matches every element that is the end child regardless of type or its parent. 63 00:05:39,790 --> 00:05:43,000 So n can represent in number. 64 00:05:43,310 --> 00:05:46,710 A key word or a formula. 65 00:05:46,880 --> 00:05:52,940 In this case 3 n means it's referring to the third balloon in the DIV. 66 00:05:53,180 --> 00:05:59,620 Okay so we see this stylin here so this in green here is the selector that I d. 67 00:05:59,870 --> 00:06:04,000 And you notice all the balloons were created as Dave's heads. 68 00:06:04,010 --> 00:06:05,090 We've got the deal here. 69 00:06:05,090 --> 00:06:12,300 So Dave we're talking about the end child of the div okay because there are several days. 70 00:06:12,320 --> 00:06:13,190 So we meet them. 71 00:06:13,250 --> 00:06:20,450 We need to use the enth child select tool to match the relevant D to were seen here in parenthesis 3 72 00:06:20,480 --> 00:06:25,120 n the n were represent the D. 73 00:06:25,130 --> 00:06:30,920 So is seeing the third div apply this styling to the third day. 74 00:06:31,280 --> 00:06:36,350 Give me that background and give the text that column online 44. 75 00:06:36,380 --> 00:06:44,710 Similar thing the same process the div anyone here was saying here 3 n minus 1 which will be 2 so that 76 00:06:44,720 --> 00:06:49,680 means is referring to the second balloon in the gallery. 77 00:06:49,820 --> 00:06:59,470 What that means if we go to line 14 line that's referring to 5 N which will be 15 balloon k. 78 00:06:59,590 --> 00:07:03,830 Ly in 54. 79 00:07:04,130 --> 00:07:07,050 We're talking bout 13. 80 00:07:07,070 --> 00:07:11,930 The child is 13 here so we're talking about the 13 div. 81 00:07:12,170 --> 00:07:14,570 The balloon that is in the 13 DB. 82 00:07:14,660 --> 00:07:25,280 Apply this stylin this one fifty eight 10 n which means apply this time in to the tent Deve inside that 83 00:07:25,280 --> 00:07:26,290 balloon. 84 00:07:26,300 --> 00:07:31,770 That's what this is and line third line sixty two. 85 00:07:32,090 --> 00:07:38,080 We are plein this thailin here to the 8 db which is the 8 balloon. 86 00:07:38,320 --> 00:07:42,250 Give you this property 6 67 again. 87 00:07:42,290 --> 00:07:43,340 Then they append challenge. 88 00:07:43,340 --> 00:07:49,040 Here is for N which is the fort and balloon and half to the fort. 89 00:07:49,040 --> 00:07:50,220 Balloon. 90 00:07:50,420 --> 00:07:51,640 Online sixty eight. 91 00:07:51,640 --> 00:07:52,760 We've caught it. 92 00:07:52,790 --> 00:07:53,200 Clear. 93 00:07:53,210 --> 00:07:59,960 When you are floating elements to the left or right there's bound to be some obstruction so you use 94 00:07:59,960 --> 00:08:02,590 the clep property if you float into the right. 95 00:08:02,720 --> 00:08:05,870 You can look both ways or you can close to the right. 96 00:08:06,020 --> 00:08:13,850 So this is the clear property on line 60 it is used to remove obstructions like 70. 97 00:08:13,850 --> 00:08:17,070 There's a tag idea. 98 00:08:17,150 --> 00:08:22,190 The attribute their chord you know this is what we all use. 99 00:08:22,190 --> 00:08:29,510 So when all the balloons have been popped this is this time it will apply to the text that will be displayed 100 00:08:29,510 --> 00:08:33,150 on the screen so the display here says none. 101 00:08:33,570 --> 00:08:39,650 And this has a colour and font size 100 pixels right so none display in a balloon. 102 00:08:39,650 --> 00:08:46,970 Once the balloon are gone and it would display colour on your display it text same there is no more 103 00:08:47,000 --> 00:08:50,710 balloons left or right. 104 00:08:51,590 --> 00:08:57,120 So let's see for our stylin just run looked through the code again. 105 00:08:57,300 --> 00:08:58,900 So we started off with a body. 106 00:08:58,920 --> 00:09:04,350 Selektah Then we had some classes here. 107 00:09:04,440 --> 00:09:09,810 One we get how was I did have an H to. 108 00:09:09,860 --> 00:09:15,070 I removed it so let's get rid of the H too snobbish to anymore. 109 00:09:15,100 --> 00:09:23,920 We did the gallery and we did the balloon gallery as we the enth child so that's it. 110 00:09:24,140 --> 00:09:25,370 I just saved that. 111 00:09:25,370 --> 00:09:27,470 Then we can view our. 112 00:09:27,680 --> 00:09:31,460 See what the app looks like at the moment. 113 00:09:31,460 --> 00:09:32,000 All right. 114 00:09:32,060 --> 00:09:36,890 Let's have a look at what happened looks like at the moment. 115 00:09:36,900 --> 00:09:38,940 I just hope on the index. 116 00:09:41,320 --> 00:09:43,800 Excellent so it's looking good at the moment. 117 00:09:43,810 --> 00:09:50,260 But no functionality yet so we can't pop them as we pull the miles over them. 118 00:09:50,470 --> 00:09:54,350 So we're going to implement that use in javascript. 119 00:09:54,370 --> 00:09:56,110 That's it for this lecture. 120 00:09:56,110 --> 00:09:57,330 Thanks for watching.